<template>
  <view class="yh-page">
	  <view class="page">
		<view class="uni-column">
			<view class="yh-title">集合示例</view>
			<view class="yh-title red">前提都需要在登录状态下</view>
		</view>
		<br/>
		<view class="uni-column">
			<view class="yh-title">用户信息</view>
		</view>
		<view class="uni-form-item uni-column">
			<view class="user-info">
				<image class="avatar" :src="showAvatar" mode="scaleToFill"></image>
				<view class="user-other-info">
					<view class="uni-column">
						<view class="row">
							<view class="item">
								昵称:{{showName}}
							</view>
							<view class="item" style="margin-left:10rpx;">
								性别:{{showSex}}
							</view>
						</view>
						<view class="item">
							手机号:{{ showPhone }}
						</view>
						<view class="item" >
							微信:{{ showWechat }}
						</view>
						<view class="item">
							注册时间:{{showCreatedAt}}
						</view>
						<view class="item" >
							介绍:{{showIntroduciton}}
						</view>
					</view>
				</view>
			</view>
			<br/>
		</view>
		<button style="margin-top: 100rpx;" type="primary" @tap="handleToUserInfo()">获取用户信息</button>
		<br/>
	  </view>
  </view>
</template>
<script>
import { checkAll } from '@/utils/test/chekLogin.js'
import { getUserInfo } from '@/api/test/after-login/after-login.js'
export default 
{
  //计算属性
  computed:
  {
	//头像
	showAvatar()
	{
		let avatar = 'https://qiniu.youhujun.com/config/avatar/01-avatar-system.png'
		
		if(this.userInfo.avatar)
		{
			avatar = this.userInfo.avatar
		}
		
		return avatar
	},
	//姓名
	showName()
	{
		let name = '昵称'
		
		if(this.userInfo.name)
		{
			name = this.userInfo.name
		}
		
		return name
	},
	//性别
	showSex()
	{
		let sex = '未知'
		
		if(this.userInfo.sex == 10)
		{
			sex = '男'
		}
		
		if(this.userInfo.sex == 20)
		{
			sex = 'nv'
		}
		
		return sex
	},
	//创建时间
	showCreatedAt()
	{
		let time = '暂无'
		
		if(this.userInfo.created_at)
		{
			time = this.userInfo.created_at
		}
		
		return time
	},
	//自我介绍
	showIntroduciton()
	{
		let introduction = '一句话介绍自己'
		
		if(this.userInfo.introduction)
		{
			introduction = this.userInfo.introduction
		}
		
		return introduction
	},
	//手机
	showPhone()
	{
		let phone = '暂无'
		
		if(this.userInfo.phone)
		{
			phone = this.userInfo.phone
		}
		
		return phone
	},
	//微信是否绑定
	showWechat()
	{
		let bind = "未绑定"
		
		if(this.userInfo.openid)
		{
			bind = "已绑定"
		}
		
		return bind
	}
  },
  //监听
  watch:
  {

  },
  data() 
  {
    return{
		userInfo:false,
    };
  },
  //页面加载
  onLoad() 
  {
	 if(!this.userInfo)
	 {
		this.toGetUserInfo()
	 }
	
	 checkAll()
  },
  //页面显示
  onShow() 
  {

  },
  //页面初次渲染完成
  onReady()
  {

  },
  //页面隐藏
  onHide()
  {

  },
  //页面卸载
  onUnload()
  {

  },
  methods:
  {
	  //获取登录用户信息
	  async handleToUserInfo()
	  {
		let param = {}
		param['openid_type'] = 10
		const userInfo = await getUserInfo(param).then(res=>
		{
			return new Promise((resolve,resject)=>{
				if(res && res.code == 0)
				{
					resolve(res.data)
				}
			})
		})
		
		console.log(userInfo)
		this.userInfo = userInfo
		
		// const { avatar,created_at,introduction,name,openid,phone,real_auth_status,roles,sex } = userInfo
		
		this.$store.dispatch('user/saveUserInfo',userInfo)
	  },
	  //主动获取用户信息
	  async toGetUserInfo()
	  {
		let param = {}
		param['openid_type'] = 10
		const userInfo = await getUserInfo(param).then(res=>
		{
			return new Promise((resolve,resject)=>{
				if(res && res.code == 0)
				{
					resolve(res.data)
				}
			})
		})
		
		console.log(userInfo)
		this.userInfo = userInfo
		
		// const { avatar,created_at,introduction,name,openid,phone,real_auth_status,roles,sex } = userInfo
		
		this.$store.dispatch('user/saveUserInfo',userInfo)
		
		
	  }
  }

}
</script>

<style lang="scss" scoped>
.page{
	width:calc(100% - 70rpx);
	padding:35rpx;
}
.title {
        padding: 5rpx 13rpx;
    }

.uni-input-wrapper {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	flex-wrap: nowrap;
	background-color: #FFFFFF;
}

.uni-input {
	height: 80rpx;
	line-height: 80rpx;
	font-size: 36rpx;
	padding: 0rpx;
	flex: 1;
	background-color: #FFFFFF;
}

.uni-icon {
	font-family: uniicons;
	font-size: 80rpx;
	font-weight: normal;
	font-style: normal;
	width: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	color: #999999;
}

.red{
	color:red;
	font-weight: true;
}
.user-info{
	width: 100%;
	height:400rpx;
	marign-bottom:10rpx;
	display: flex;
	flex-direction: row;
	justify-content:  flex-start;
	/* background-color: pink; */
	.avatar{
		width: 200rpx;
		height:200rpx;
		border-radius: 50%;
		border:1px solid  #FFA500;
		margin-top:100rpx;
		margin-bottom:100rpx;
		margin-left:20rpx;
		margin-right:10rpx;
	}
}
.row{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.item{
	width:auto;
	min-width: 50rpx;
	height:100rpx;
	line-height: 100rpx;
	// background-color: #FDF5E6;
	color: 	#838B83;
}
</style>
